<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏式布局</title>
    <style>
		/*
		布局思路： 利用 左、右、中3个模块布局，左和右部分分别用左、右浮动，并且给定宽度；
		中间部分直接用margin来布局，其中margin-left为左边部分的宽度+10px，margin-right为右边部分的宽度+10px；
		10px为中间部分和左右两款的间隔
		
		*/
		* {
			margin: 0;
			padding: 0;
		}
		img {
			display: block;
			width: 80px;
			height: 80px;
			border-radius: 10px;
		}
		/*.clearfix:after {
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
			height: 0;
			zoom: 1;
		}*/
		#main_body {
			margin: 20px 20px;
			background: #eee;
			border: 1px solid #999;
			padding: 20px;
			overflow: hidden;
		}

		.left {
			float: left;
			border: 1px solid #999;
			width: 158px;
			padding: 20px;
			background: #fff;
			overflow: hidden;
		}

		.left img {
			float: left;
		}
		
		.team-name {
			float: right;			
			font-size: 12px;
			width: 78px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			line-height: 80px;
		}
		
		
		/*右边部分*/
		.right {
			float: right;
			width: 78px;
			border: 1px solid #999;
			padding: 20px;
			background: #fff;
			padding-bottom: 5px;
		}
		.right li {
			list-style: none;
		}
		.right li a {
			display: block;
			margin-bottom: 15px;
			width: 80px;
			height: 80px;
		}
		/*中间部分*/
		.mid {
			height: auto;
			padding: 20px;
			border: 1px solid #999;
			background: #fff;
			margin: 0 130px 0 210px;
		}
		.mid>h3 {
			height: 30px;
			line-height: 30px;
		}
		.mid>p{
			line-height: 15px;
		
		}
    </style>
</head>
<body>
    
    <div id="main_body">
        
		<div class="left">
            <div class="wrap-l">
                <img src="images/lufei.jpg" alt="路飞">
                <p class="team-name">海贼王-最强Team</p>
            </div>
        </div>

        <div class="right">
            <ul>
                <li><a href=""><img src="images/luobing.jpg" alt=""></a></li>
                <li><a href=""><img src="images/namei.jpg" alt=""></a></li>
                <li><a href=""><img src="images/qiaoba.jpg" alt=""></a></li>
                <li><a href=""><img src="images/suonong.jpg" alt=""></a></li>
                <li><a href=""><img src="images/wusuopu.jpg" alt=""></a></li>
                <li><a href=""><img src="images/xaingji.jpg" alt=""></a></li>
            </ul>
        </div>

		<div class="mid">
            <h3>团队介绍</h3>
            <p>拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。
                “想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。 
                时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。
                一个叫路飞的少年为了与因救他而断臂的香克斯的约定而出海，在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大冒险旅程。
            </p>
        </div>
    </div>

</body>
</html>